<template>
    <div>响应式API-进阶</div>
    <div>
        <h5>demo-ref</h5>
        <a-button @click="validate">校验</a-button>
        <component ref="formItemRef" v-model:value="formData.color" :is="cmps[cmpType]"></component>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// import type { ComponentPublicInstance } from 'vue'
// import LeColor from './demo/LeColor/index.vue'
import cmps from './demo/index'

const cmpType = 'le-color'
// const formItemRef = ref<ComponentPublicInstance | null>(null)
const cmp2 = cmps[cmpType]
const formItemRef = ref<typeof cmp2 | null>(null)
const formData = ref({
    color: ''
})

const validate = () => {
    console.log('开始校验==', formItemRef.value, formItemRef.value?.validate())
}
</script>
<style>
.ref-warpper {
    display: flex;
    padding:20px;
    text-align: left;
}
.ref-box {
    width: 200px;
}
</style>